﻿<!-- 文件名称：query.html -->
<!-- 完整路径：frontend/templates/query.html -->
<!-- 功能说明：数据查询页面（配置驱动架构升级版） -->

{% extends "layouts/base.html" %}
{% block title %}数据查询 - 近视预防干预系统{% endblock %}

{% block styles %}
<link rel="stylesheet" href="{{ url_for('static', filename='css/query.css') }}">
{% endblock %}

{% block content %}
<div class="container my-4">
  <!-- 查询条件区域（配置驱动） -->
  <div class="card mb-3">
    <div class="card-body p-2">
      <!-- 使用FixedQueryArea组件渲染查询区 -->
      <div id="fixedQueryArea"></div>
    </div>
  </div>

  <!-- 结果展示区域 -->
  <div id="resultArea">
    <table class="table table-bordered">
      <thead id="resultTableHead">
        <tr>
          <!-- 表头将由JavaScript根据配置动态生成 -->
          <th class="text-muted">请选择查询条件并点击查询</th>
        </tr>
      </thead>
      <tbody id="resultTableBody"></tbody>
    </table>
    <nav><ul class="pagination" id="pagination"></ul></nav>
  </div>
</div>
{% endblock %}

{% block scripts %}
{{ super() }}
<script src="{{ url_for('static', filename='js/FixedQueryArea.js') }}"></script>
<script src="{{ url_for('static', filename='js/query.js') }}"></script>
{% endblock %}